<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>javascript01</title>
        <meta name="description" content="" />
        <meta name="author" content="Choongang31" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    </head>

    <body>
      <script>
      //타입이 없다.var 는 전역변수선언 이고 안쓰면 지역변수이다.
          var a=10;
          var b="hello";
          var c="true";
          d=0;
          e="bye";
          
          //create Object
          person = new Object();
          person.name="김씨 ";
          person.age=30;
          person.address="서울 "
          console.log("person?",person);
          console.log("b 나는 var b=hello",b);
          
          lion={name:"라이거 ",age:5,city:"서울동물원 "};
          console.log("lion?",lion);
          
          
          function hello(){
              //objectName.propertyName
              d=b.length;
              a++
              //objectName.methodName()
              alert("hello".toUpperCase()+a+"hello의 길이는"+d);
          }
          
          function Taxi(money,location){
              this.money=money;                       //속성 
              this.location=location;
              this.changeMoney=changeMoney;
              
              function changeMoney(newMoney){        //메서드 
                  this.money=newMoney;
              }
          }
          //위의 Taxi펑션을 호출하고 Object로 생성 
          Taxi1=new Taxi(3000,"강북 ");
          console.log("Taxi1?",Taxi1);
          Taxi1.changeMoney(5000);
          console.log("Taxi1?",Taxi1);
          
          for(x in Taxi1){
              console.log("Taxi1[x]?",Taxi1[x]);
          }
          for(x in lion){
              console.log("lion[x]?",lion[x]);
          }
          
      </script>
      <button onclick="hello()">누르세요.</button>
      <script>
          buttons=document.getElementsByTagName("button");
          button=buttons[0];
          for(x in button){
              console.log("button에는 무었이 있는가?",button[x]);
          }
          
          date1=new Date();
          date2=new Date(2013,0,9);
          document.write(date1+"<br>");
          document.write(date2+"<br>");
          
          web=new Array();
          document.write("값 셋팅전의 web"+web);
          console.log("값 셋팅전의 web",web);
          web[0]="HTML5";
          web[1]="java script";
          web[2]="css3";
          document.write("값 셋팅후의 web="+web);
          console.log("값 셋팅후의 web=",web);
          
          day=["아침 ","점심 ","저녁 "];//배열 
          console.log("day=",day);
          console.log("button=",button);
          
          
      </script>
      <div id="c"> 클릭해보세요 </div>
      <div id="on">마우스를 올려보세요 </div>
      <div id="off">마우스버튼을 눌렀다 띠어보세요 </div>
      <div id="canvas">그림판 </div>
      <script>
        c = document.getElementById("c");
        on=  document.getElementById("on");
        off= document.getElementById("off"); 
        canvas= document.getElementById("canvas");        
        //event(사건-사람이 만들기도 하고 )처리 
        c.onclick=function(){
            canvas.innerHTML="c 클릭하셧군요 ";
        }
        on.onmouseover=function(){
            canvas.innerHTML="on 마우스 올렸군요 "
        }
        off.onmouseup=function(){
            canvas.innerHTML="off 마우스 버튼을 눌렀다 놨군요";
        }
      </script>
    </body>
</html>
